
<template>
    <svg
      class="icon"
      aria-hidden="true"
      @click="handleClick"
    >
      <use :xlink:href="IconName"></use>
    </svg>
</template>
<script>
    import '../../assets/js/iconfont.js'
    export default {
        name:'zIcon',
        props: {
            name: {
                type: String,
                default: ''
            }
        },
        computed: {
            IconName() {
                return `#icon-${this.name}`
            }
        },
        methods: {
            handleClick() {
                this.$emit('click')
            }
        }
    }
</script>
<style scoped>
.icon {
    width: 1em;
    height: 1em;
    overflow: hidden;
}
</style>